<template>
  <div class="footer">
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <img v-bind:src="homeImg" slot="icon"/>
        首页
      </mt-tab-item>
      <mt-tab-item id="sale">
        <img :src="saleImg" slot="icon"/>
        特卖
      </mt-tab-item>
      <mt-tab-item id="live">
        <img :src="liveImg" slot="icon"/>
        直播
      </mt-tab-item>
      <mt-tab-item id="car">
        <img :src="carImg" slot="icon"/>
        购物车
      </mt-tab-item>
      <mt-tab-item id="my">
        <img :src="myImg" slot="icon"/>
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      selected: 'home',
      homeImg: 'static/icon/indexchoose.png',
      saleImg: 'static/icon/brand.png',
      liveImg: 'static/icon/live.png',
      carImg: 'static/icon/cart.png',
      myImg: 'static/icon/me.png',
    };
  },
  computed: {
    // 初始化时调用.
    select() {
      // 从vuex的state中读取
      return this.$store.state.selectTab;
    },
  },
  watch: {
    // 监听otherSelected
    otherSelelct() {
      this.selected = this.select;
    },
    // 监听selected的变化
    selected() {
      if (this.selected === 'home') {
        // 将首页的路由push进路由表
        this.$router.push('/');
        this.$store.commit('SELECTTAB', 'home');
        this.homeImg = 'static/icon/indexchoose.png';
      } else {
        this.homeImg = 'static/icon/index.png';
      }

      if (this.selected === 'sale') {
        // 将特卖的路由push进路由表
        this.$router.push('/brandsale');
        this.$store.commit('SELECTTAB', 'sale');
        this.saleImg = 'static/icon/brandchoose.png';
      } else {
        this.saleImg = 'static/icon/brand.png';
      }

      if (this.selected === 'live') {
        // 将直播的路由push进路由表
        this.$router.push('/live');
        this.$store.commit('SELECTTAB', 'live');
        this.liveImg = 'static/icon/livechoose.png';
      } else {
        this.liveImg = 'static/icon/live.png';
      }

      if (this.selected === 'car') {
        // 将直播的路由push进路由表
        this.$router.push('/car');
        this.$store.commit('SELECTTAB', 'car');
        this.carImg = 'static/icon/cartchoose.png';
      } else {
        this.carImg = 'static/icon/cart.png';
      }

      if (this.selected === 'my') {
        // 将直播的路由push进路由表
        this.$router.push('/myself');
        this.$store.dispatch('SELECTTAB', 'my');
        this.myImg = 'static/icon/mechoose.png';
      } else {
        this.myImg = 'static/icon/me.png';
      }
    },
  },
};
</script>

<style scoped>
  .footer{
    /*padding: 1em;*/
    /*display: flex;*/
    /*flex-direction: row;*/
    background-color: #7e8c8d;
  }
  mint-tabbar {
    background: #7e8c8d;
    height: 1.5625rem;
    padding-top: -.4rem;
  }
  mint-tab-item is-selected {
    color: #FE4070;
    background: #fff;
    text-decoration: none;
  }
</style>
